<template>
  <el-container>
    <el-aside width="70%">
      <div style="background-color:#dcdfe6">
        <div style="margin-top: 10px;background-color: white;height:230px">
          <div class="title"></div>
          <div style="display: inline-block">我的提醒</div>
          <WorkTabs></WorkTabs>
        </div>
        <div style="margin-top: 10px;background-color: white;">
          <div class="title"></div>
          <div style="display: inline-block">我的数据驾驶舱</div>
          <div style="margin-top: 30px">
            <div style="display: inline-block;margin-left: 100px;text-align: center">
              <div>知识词条</div>
              <div style="margin-top: 20px">
                <el-progress :percentage="knowledgeProgress" type="circle"></el-progress>
                <div style="margin-top: 10px">总任务数：{{knowledgeSum}}</div>
                <div style="margin-top: 10px">未完成：{{knowledgeUnfinishedNum}}</div>
                <div style="margin-top: 10px">完成：{{knowledgeFinishedNum}}</div>
              </div>
            </div>
            <div style="display: inline-block;margin-left: 210px;text-align: center">
              <div>知识规则</div>
              <div style="margin-top: 20px">
                <el-progress :percentage="calculateProgress" type="circle"></el-progress>
                <div style="margin-top: 10px">总任务数：{{calculateSum}}</div>
                <div style="margin-top: 10px">未完成：{{calculateUnfinishedNum}}</div>
                <div style="margin-top: 10px">完成：{{calculateFinishedNum}}</div>
              </div>
            </div>
            <div style="display: inline-block;margin-left: 210px;text-align: center">
              <div>流程图</div>
              <div style="margin-top: 20px">
                <el-progress :percentage="flowChartProgress" type="circle"></el-progress>
                <div style="margin-top: 10px">总任务数：{{flowChartSum}}</div>
                <div style="margin-top: 10px">未完成：{{flowChartUnfinishedNum}}</div>
                <div style="margin-top: 10px">完成：{{flowChartFinishedNum}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-aside>
    <el-main style="background-color:#dcdfe6;padding: 1px;padding-left: 10px">
      <div>
        <div style="height: 409px;background-color: white">
          <div class="title"></div>
          <div style="background-color: white;margin-left: 10px;display: inline-block">
            消息中心
          </div>
          <div style="margin-left: 10px">
            <el-tabs @tab-click="handleClick" v-model="activeName">
              <el-tab-pane label="新任务" name="first">
                <MessageTable system="newTask"></MessageTable>
              </el-tab-pane>
              <el-tab-pane label="驳回任务" name="second">
                <MessageTable system="rejectTask"></MessageTable>
              </el-tab-pane>
              <el-tab-pane label="催办任务" name="third">
                <MessageTable system="pressTask"></MessageTable>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div style="margin-top: 10px;background-color: white">
          <div style="margin-left: 10px">
            <div class="title"></div>
            <div style="display: inline-block">快速入口</div>
            <div style="height:  323px">
              <el-scrollbar style="height:100%;">
                <el-row class="tac">
                  <el-col :span="24">
                    <el-menu
                      class="el-menu-vertical-demo"
                      default-active="2">
                      <el-submenu index="1">
                        <template slot="title">
                          <i class="el-icon-location"></i>
                          <span>工作台</span>
                        </template>
                        <el-menu-item-group>
                          <el-menu-item index="1-1">选项1</el-menu-item>
                          <el-menu-item index="1-2">选项2</el-menu-item>
                          <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                      <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">任务管理</span>
                      </el-menu-item>
                      <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">知识体系</span>
                      </el-menu-item>
                      <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">知识资源</span>
                      </el-menu-item>
                    </el-menu>
                  </el-col>
                </el-row>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
    </el-main>

  </el-container>
</template>

<script>
  import WorkTabs from "./WorkTabs";
  import MessageTable from "./MessageTable";

  export default {
    name: "EditWork",
    components: {
      WorkTabs,
      MessageTable,
    },
    data() {
      return {
        knowledgeTaskNum: 0,
        calculateTaskNum: 0,
        flowChartTaskNum: 0,
        knowledgeSum: 0,
        calculateSum: 0,
        flowChartSum: 0,
        knowledgeUnfinishedNum: 0,
        calculateUnfinishedNum: 0,
        flowChartUnfinishedNum: 0,
        knowledgeFinishedNum: 0,
        calculateFinishedNum: 0,
        flowChartFinishedNum: 0,
        knowledgeProgress: 0,
        calculateProgress: 0,
        flowChartProgress: 0,
        activeName: 'first'
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    created() {
      this.axios.get('/pmph/action/work/selectTaskNum', {}).then((response) => {
        this.knowledgeTaskNum = response.data.knowledgeTaskNum
        this.calculateTaskNum = response.data.calculateTaskNum
        this.flowChartTaskNum = response.data.flowChartTaskNum
      })
      this.axios.get('/pmph/action/work/selectSum', {}).then((response) => {
        this.knowledgeSum = response.data.knowledgeSum
        this.calculateSum = response.data.calculateSum
        this.flowChartSum = response.data.flowChartSum
        this.knowledgeUnfinishedNum = response.data.knowledgeUnfinishedNum
        this.calculateUnfinishedNum = response.data.calculateUnfinishedNum
        this.flowChartUnfinishedNum = response.data.flowChartUnfinishedNum
        this.knowledgeFinishedNum = response.data.knowledgeFinishedNum
        this.calculateFinishedNum = response.data.calculateFinishedNum
        this.flowChartFinishedNum = response.data.flowChartFinishedNum
        this.knowledgeProgress = response.data.knowledgeProgress
        this.calculateProgress = response.data.calculateProgress
        this.flowChartProgress = response.data.flowChartProgress
      })
    }
  }
</script>

<style scoped>

</style>
